<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆之绘 - 交互式圆形绘制</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>圆之绘</h1>
        <div class="canvas-container">
            <canvas id="circleCanvas" width="400" height="400"></canvas>
        </div>
        
        <div class="controls">
            <div class="control-group">
                <label for="radiusSlider">半径: <span id="radiusValue">100</span>px</label>
                <input type="range" id="radiusSlider" min="50" max="200" value="100" class="slider">
            </div>
            
            <div class="control-group">
                <label for="colorPicker">颜色:</label>
                <input type="color" id="colorPicker" value="#ff0000" class="color-picker">
            </div>
            
            <div class="control-group">
                <label>
                    <input type="checkbox" id="strokeToggle" checked>
                    显示描边
                </label>
            </div>
            
            <div class="control-group">
                <label for="strokeWidth">描边宽度: <span id="strokeValue">2</span>px</label>
                <input type="range" id="strokeWidth" min="1" max="10" value="2" class="slider">
            </div>
            
            <button id="resetBtn" class="btn">重置</button>
        </div>
        
        <div class="info">
            <p>点击圆形可以切换描边开关</p>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>